<template>
  <div>
    <!-- <h1>当前求和为：{{he}}</h1> -->
    <h1>当前求和为：{{sum}}</h1>
    <h1>当前求和放大十倍为：{{bigSum}}</h1>
    <select v-model.number="selectedNumber">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <button @click="increment(selectedNumber)">+</button>
    <button @click="decrement(selectedNumber)">-</button>
    <button @click="incrementOdd(selectedNumber)">当前求和为奇数再加</button>
    <button @click="incrementWait(selectedNumber)">等一等再加</button>
    <!-- <h3>学校:{{xuexiao}}</h3>
    <h3>学校:{{xuesheng}}</h3> -->
    <h3>学校:{{school}}</h3>
    <h3>学校:{{student}}</h3>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
export default {
  name: 'count',
  data () {
    return {
      selectedNumber: 1
    }
  },
  methods: {
    // increment () {
    // this.$store.dispatch("jia", this.selectedNumber)
    // 越过actions 直接调mutations
    //   this.$store.commit("JIA", this.selectedNumber)
    // },
    // decrement () {
    //   this.$store.commit("JIAN", this.selectedNumber)
    // },
    // 注意了：这里并没有传参，所以传的是默认参数，鼠标event事件
    // 正确的做法是，在模板中调用这个函数时，把参数传递进去
    ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
    // 数组写法，但是模板中就不能用increment方法名咯
    ...mapMutations(['JIA', 'JIAN']),


    // incrementOdd () {
    //   this.$store.dispatch("jiaodd", this.selectedNumber)
    // },
    // incrementWait () {
    //   this.$store.dispatch("jiawait", this.selectedNumber)
    // },

    ...mapActions({ incrementOdd: 'jiaodd', incrementWait: 'jiawait' }),
    // 数组写法
    ...mapActions(['jiaodd', 'jiawait'])
  },
  computed: {
    // 借助mapState生成计算属性，从state中读取数据。（对象写法）
    // ...mapState({ he: 'sum', xuexiao: 'school', xuesheng: 'student' }),
    // ...mapGetters({bigSum:'bigSum'}),

    // 借助mapState生成计算属性，从state中读取数据。（数组写法,保证计算属性名和state中数据一致）
    ...mapState(['sum', 'student', 'school']),
    ...mapGetters(['bigSum'])
  }
}
</script>

<style lang="css" >
button {
  margin-left: 5px;
}
</style>